<template>
  <div class="home">
    <van-nav-bar
      v-if="navBarStore.show"
      :left-arrow="navBarStore.leftArrow"
      :left-text="navBarStore.leftText"
      :title="navBarStore.title"
      @click-left="onClickLeft"
    />
    <van-pull-refresh
      v-model="isLoading"
      :disabled="refreshStore.disable"
      style="min-height: calc(100vh - 13.33333vw)"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <router-view v-slot="{ Component }">
        <keep-alive :include="routerStore.getKeepAliveList">
          <Component :is="Component" :key="$route.fullPath" />
        </keep-alive>
      </router-view>
    </van-pull-refresh>
    <van-tabbar
      v-if="tabBarStore.show && tabBarStore.getTabBarList.length !== 0"
      v-model="active"
      :active-color="tabBarStore.activeColor"
      :before-change="beforeTabBarChange"
      :inactive-color="tabBarStore.inactiveColor"
      placeholder
    >
      <van-tabbar-item
        v-for="(item, index) in tabBarStore.getTabBarList"
        :key="index"
        :name="item.path"
        :to="item.path"
      >
        <span v-if="isNotEmpty(item.title)" :class="active === index ? active : ''">{{ item.title }}</span>
        <template #icon="props">
          <svg-icon
            v-if="item.active.indexOf('icon:') !== -1"
            :height="isNotEmpty(item.title) ? '4vw' : '16vw'"
            :name="props.active ? item.active.split(':')[1] : item.inactive.split(':')[1]"
            :width="isNotEmpty(item.title) ? '5vw' : '18vw'"
          />
          <img v-else :src="props.active ? item.active : item.inactive" alt="图标" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <login v-if="isLocalLogin()" />
  </div>
</template>

<script lang="ts" setup>
import router from '../../router/index'
import { useNavBarStore } from '../../store/layout/navBar'
import { useTabBarStore } from '../../store/layout/tabBar'
import SvgIcon from '../../components/SvgIcon/index.vue'
import { Ref } from 'vue'
import { isNotEmpty } from '../../utils/common'
import Login from '../../components/Login/index.vue'
import { isLocalLogin } from '../../requests/login'
import { useRefreshStore } from '../../store/layout/refresh'
import { useRouterStore } from '@/framework/store/router'

const routerStore = useRouterStore()
const navBarStore = useNavBarStore()
const tabBarStore = useTabBarStore()
const refreshStore = useRefreshStore()
const route = useRoute()
const active: Ref<string> = ref(tabBarStore.defaultTab)

const isLoading = ref(false)
const onRefresh = () => {
  refreshStore.refresh()
  isLoading.value = false
}
const onClickLeft = () => history.back()
const beforeTabBarChange = (path: string) => {
  if (isNotEmpty(tabBarStore.getTabBar(path)?.path)) {
    return true
  } else {
    return tabBarStore.getTabBar(path)?.handler(active.value)
  }
}
watch(
  () => active.value,
  () => tabBarStore.setCurrentTab(active.value)
)
watch(
  () => tabBarStore.currentTab,
  () => (active.value = tabBarStore.currentTab)
)
onMounted(() => {
  const path = route.path
  if (isEmpty(path)) {
    router.replace({ path: tabBarStore.defaultTab })
  } else {
    active.value = route.path
  }
})
</script>

<style lang="less" scoped>
.home {
  background-color: #f7f8fa;
}
</style>
